<template>
	<view>
		<view class="con">
			<view class="con__top">
				<image src="/static/points/boxbg1.png" class="con__top__bg" mode=""></image>
				<image src="/static/points/hbb.png" class="con__top__hb" mode=""></image>
				<view class="con__top__c">
					<view class="con__top__title">
						我的积分
					</view>
					<view class="con__top__num">
						{{userInfo.score}}
					</view>
					<u-button @click="navto('/pages/points/raffle')"
						:customStyle="{width:'180rpx',height:'68rpx',padding:0,fontSie:'26rpx',margin:0,}"
						shape='circle' color="#ff5840" text="积分抽奖"></u-button>
				</view>
			</view>
			<view class="con__b">
				<view class="con__b__item" @click="navtoU(('/pages/points/exchange'))">
					<image src="/static/points/dh.png" class="con__b__item__icon" mode=""></image> 兑换积分
				</view>
				<view class="con__b__line">

				</view>
				<view class="con__b__item" @click="navtoU('/pages/points/sell')">
					<image src="/static/points/mam.png" style="width: 28rpx;" class="con__b__item__icon" mode="">
					</image>
					出售积分
				</view>
			</view>
			<view class="con__a"
				:style="{height:'calc(100vh - 30rpx - 289rpx - 95rpx - 30rpx - 27rpx - '+$u.addUnit($u.getPx(44) + $u.sys().statusBarHeight,'px')+')'}">
				<view class="con__a__title" style="padding-bottom: 20rpx;">
					积分明细
				</view>
				<scroll-view scroll-y="true" style="height: calc(100% - 30rpx - 48rpx);">
					<view class="" style="padding-bottom: 30rpx;">
						<view class="con__a__item" v-for="(item,index) in list" :key="index">
							<image src="/static/points/icon.png" class="con__a__item__icon" mode=""></image>
							<view class="con__a__item__center">
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="con__a__item__name">
										{{item.memo}}
									</view>
									<view class="con__a__item__num" v-if="item.type==1">
										+{{item.score}}
									</view>
									<view class="con__a__item__num" style="color: grey;" v-else>
										-{{item.score}}
									</view>
								</view>
								<view class="con__a__item__time">
									{{formatTimestamp(item.createtime)}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo,
		
	} from "@/request/api/my.js"
	import {
		scorelist,
		
	} from "@/request/api/pointer.js"
	export default {
		data() {
			return {
				list:[],
				userInfo: {
					score: 0
				},
			};
		},
		onShow() {
			userInfo().then(res => {
				this.userInfo = res.data;
			})
			scorelist().then(res => {
				this.list = res.data;
			})
		},
		methods: {
			formatTimestamp(timestamp) {
				// 创建 Date 对象
				const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
				// 获取年份、月份、日期、小时、分钟、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			navtoU(url) {
				uni.$u.toast('开发中');
			}
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx 30rpx 0;

		&__top {
			width: 690rpx;
			height: 289rpx;
			position: relative;

			&__bg {
				position: absolute;
				width: 690rpx;
				height: 289rpx;
			}

			&__hb {
				width: 214rpx;
				height: 240rpx;
				position: absolute;
				top: 22rpx;
				right: 48rpx;
			}

			&__c {
				padding: 50rpx 0 0 36rpx;
				position: relative;

			}

			&__title {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: normal;
				font-size: 24rpx;
				color: #000000;
				line-height: 24rpx;
			}

			&__num {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 68rpx;
				color: #000000;
				line-height: 68rpx;
				margin-top: 20rpx;
				margin-bottom: 14rpx;
			}
		}

		&__b {
			height: 95rpx;
			background: #FF5151;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&__item {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

				&__icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			&__line {
				width: 1rpx;
				height: 25rpx;
				background: #562620;
				opacity: 0.3;
			}
		}

		&__a {
			margin-top: 27rpx;
			height: 932rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0 0;
			padding: 0 29rpx;

			&__title {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #010101;
				line-height: 30rpx;
				padding-top: 48rpx;
			}

			&__item {
				padding: 0 0 0 29rpx;
				display: flex;
				align-items: center;

				&__icon {
					width: 68rpx;
					height: 68rpx;
				}

				&__name {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 28rpx;
				}

				&__num {
					font-family: DINNextLTPro;
					font-weight: 500;
					font-size: 32rpx;
					color: #FF5152;
					line-height: 32rpx;
					margin-top: 10rpx;
				}

				.jian {
					color: #000000;
				}

				&__time {
					font-family: DINNextLTPro;
					font-weight: 500;
					font-size: 25rpx;
					color: #929292;
					line-height: 25rpx;
					margin-top: 10rpx;
				}

				&__center {
					flex: 1;
					border-bottom: 1rpx solid #E9EAEC;
					padding: 36rpx 21rpx;
				}

			}
		}
	}
</style>